import React, { Component } from 'react';

class App extends Component {

  state = {
    str: '',
    select: '',
    sex: '',
    hobby: []
  }

  changeValue = (e)=>{
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  changeHobby = (e)=>{
    console.log(e.target.value, e.target.checked);

    const arr = [...this.state.hobby]

    if(e.target.checked){
      // 该选项被选中了，应该将其放在数组中
      arr.push(e.target.value)
    }else {
      // 该选项被取消选中了，应该将其在数组中移除掉
      const index = this.state.hobby.findIndex(item => { return e.target.value === item })
      console.log(index);
      // 将符合条件的内容移除掉
      arr.splice(index, 1)
    }

    this.setState({
      hobby: arr
    })

  }

  render() {
    return (
      <div>
        <h1>{this.state.str}</h1>
        <input type="text" name='str' value={this.state.str} onChange={(e)=>{this.changeValue(e)}} />
        <textarea value={this.state.str} name='str' onChange={(e)=>{this.changeValue(e)}}></textarea>


        <h1>{this.state.select}</h1>
        <select name="select" value={this.state.select} onChange={(e)=>{this.changeValue(e)}} id="">
          <option value="1">番茄炒蛋</option>
          <option value="2">西红柿炒蛋</option>
          <option value="3">番茄炒西红柿</option>
          <option value="4">青椒炒蛋</option>
        </select>

        <br />
        <input type="radio" value='男' name='sex' onChange={this.changeValue} /> 男
        <input type="radio" value='女' name='sex' onChange={this.changeValue} /> 女
        ------ 你选中的是： {this.state.sex}
        <br />

        <input type="checkbox" value={'篮球'} onChange={this.changeHobby} name="hobby" id="" /> 篮球
        <input type="checkbox" value='足球' onChange={this.changeHobby} name="hobby" id="" /> 足球
        <input type="checkbox" value='台球' onChange={this.changeHobby} name="hobby" id="" /> 台球
        <input type="checkbox" value='橄榄球' onChange={this.changeHobby} name="hobby" id="" /> 橄榄球
        <input type="checkbox" value='乒乓球' onChange={this.changeHobby} name="hobby" id="" /> 乒乓球
        <input type="checkbox" value='羽毛球' onChange={this.changeHobby} name="hobby" id="" /> 羽毛球
        <br />
        ------ 你选中的是：{this.state.hobby}
      </div>
    );
  }
}

export default App;
